<!--
 * @Description: 
 * @Author: 【大白菜】2601779853@qq.com
 * @Date: 2023-08-03 09:41:26
 * @LastEditTime: 2023-08-03 09:41:30
 * @LastEditors: 【大白菜】2601779853@qq.com
-->
<template>
  <div class="page">
    <el-form :model="ruleForm" ref="ruleForm" label-width="130px">
      <el-card>
        <h3>云服务配置</h3>
        <el-tabs type="border-card">
          <el-tab-pane label="一般配置">
            <el-form-item label="是否启用云服务" prop="value1">
              <el-switch v-model="ruleForm.value1">
              </el-switch>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="高级选项">
            <el-row>
              <el-col :span="6">
                <el-form-item label="设备在线心跳间隔" prop="value2">
                  <el-input-number v-model="ruleForm.value2" :min="0" :max="999999"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="采集调试等级" prop="value3">
                  <el-select v-model="ruleForm.value3" placeholder="请选择">
                    <el-option v-for="item in value3List" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="采集日志大小" prop="value4">
                  <el-select v-model="ruleForm.value4" placeholder="请选择">
                    <el-option v-for="item in value4List" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="触发器调试等级" prop="value5">
                  <el-select v-model="ruleForm.value5" placeholder="请选择">
                    <el-option v-for="item in value3List" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="触发器日志大小" prop="value6">
                  <el-select v-model="ruleForm.value6" placeholder="请选择">
                    <el-option v-for="item in value4List" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="云接入调试等级" prop="value7">
                  <el-select v-model="ruleForm.value7" placeholder="请选择">
                    <el-option v-for="item in value3List" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="云接入日志大小" prop="value8">
                  <el-select v-model="ruleForm.value8" placeholder="请选择">
                    <el-option v-for="item in value4List" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="是否存储历史" prop="value9">
                  <el-select v-model="ruleForm.value9" placeholder="请选择">
                    <el-option v-for="item in value5List" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="致命错误是否重启" prop="value10">
                  <el-select v-model="ruleForm.value10" placeholder="请选择">
                    <el-option v-for="item in value5List" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="设备链路看护" prop="value11">
                  <el-select v-model="ruleForm.value11" placeholder="请选择">
                    <el-option v-for="item in value5List" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <el-card class="l-mg-top20">
        <div class="l-f l-row-sb">
          <h3>中心配置</h3>
          <el-button type="primary" size="small" icon="el-icon-plus" @click="onAdd">添加中心配置</el-button>
        </div>
        <el-table :data="listData" style="width: 100%">
          <el-table-column prop="value1" label="是否开启" width="120">
            <template scope="scope">
              <el-switch v-model="scope.row.value1"></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="value2" label="中心名字" min-width="150">
          </el-table-column>
          <el-table-column prop="value3" label="中心类型" min-width="120">
          </el-table-column>
          <el-table-column prop="value4" label="中心地址" min-width="150">
          </el-table-column>
          <el-table-column prop="value5" label="中心端口" min-width="120">
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="primary" size="small">修改</el-button>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-form>
    <div class="l-f l-row-c l-mg-top30">
      <el-button type="primary" @click="submitForm('ruleForm')">保存&应用</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">保 存</el-button>
      <el-button type="primary">复 位</el-button>
    </div>
    <el-dialog title="添加/编辑中心配置" :visible.sync="dialogVisible" width="600px">
      <el-form :model="editForm" ref="editForm" label-width="100px">
        <el-form-item label="中心名字" prop="value1">
          <el-input v-model="editForm.value1"></el-input>
        </el-form-item>
        <el-form-item label="中心类型" prop="value2">
          <el-select v-model="editForm.value2" placeholder="请选择中心类型">
            <el-option label="IOT接入云平台" value="shanghai"></el-option>
            <el-option label="IOT数据云平台" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="中心地址" prop="value3">
          <IPAddress v-model="editForm.value3" />
        </el-form-item>
        <el-form-item label="中心端口" prop="value4">
          <el-input v-model="editForm.value4"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="value5">
          <el-switch v-model="editForm.value5"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import IPAddress from '@/components/IPAddress/index.vue'
export default {
  components: {
    IPAddress
  },
  data() {
    return {
      ruleForm: {
        value1: true,
        value2: 60,
        value3: '',
        value4: '',
        value5: '',
        value6: '',
        value7: '',
        value8: '',
        value9: 1,
        value10: 0,
        value11: 1
      },
      editForm: {
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        value5: ''
      },
      dialogVisible: false,
      value3List: [
        {
          label: '致命',
          value: 1
        },
        {
          label: '错误',
          value: 2
        },
        {
          label: '警告',
          value: 3
        },
        {
          label: '通知',
          value: 4
        },
        {
          label: '信息',
          value: 5
        },
        {
          label: '调试',
          value: 6
        }
      ],
      value4List: [
        {
          label: '20K',
          value: 1
        },
        {
          label: '50K',
          value: 2
        },
        {
          label: '100K',
          value: 3
        },
        {
          label: '150K',
          value: 4
        },
        {
          label: '200K',
          value: 5
        },
        {
          label: '500K',
          value: 6
        }
      ],
      value5List: [
        {
          label: '启用',
          value: 0
        },
        {
          label: '禁用',
          value: 1
        }
      ],
      listData: [
        {
          value1: true,
          value2: '2.248',
          value3: '开放IOT平台',
          value4: '192.168.2.248',
          value5: '1883'
        }
      ]
    }
  },
  methods: {
    onAdd() {
      this.dialogVisible = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped></style>